<template>
  <div>
    <!-- 组件引入 -->
    <cart-header></cart-header>
    <!-- 期刊服务内容部分 -->
    <div class="qkfw">
      <!-- 一、banner部分 -->
      <div class="banner">
        <img src="/img/qkfw-banner.png" height="470px" />
        <div class="content">
          <h1>期刊投稿服务</h1>
          <h4>期刊推荐、进度管理、更方便，更快速</h4>
          <a href="#">立即咨询</a>
        </div>
      </div>
      <!-- 二、热门期刊服务部分 -->
      <div class="rmqk">
        <div class="top">
          <h2>热门期刊服务</h2>
          <div class="p">期刊咨询，只收取有限定金，不成功退还费用</div>
          <div class="pic">
            <ul>
              <li>
                <img src="/img/cssci.png" />
                <p>CSSCI</p>
              </li>
              <li>
                <img src="/img/cscd.png" />
                <p>CSCD</p>
              </li>
              <li>
                <img src="/img/beida.png" />
                <p>北大</p>
              </li>
              <li>
                <img src="/img/tongji.png" />
                <p>统计源</p>
              </li>
              <li>
                <img src="/img/zhiwang.png" />
                <p>知网</p>
              </li>
              <li>
                <img src="/img/weipu.png" />
                <p>维普</p>
              </li>
              <li>
                <img src="/img/wanfang.png" />
                <p>万方</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="qikan">
          <ul>
            <li v-for="item in 10" :key="item.id">
              <span><img src="/img/zgjy.jpg" /></span>
              <h5>中国教育学刊</h5>
              <p>北大期刊 1-3个月</p>
              <b>人气：<i>68247</i></b> &nbsp; <b>评论：<i>39</i></b>
            </li>
          </ul>
          <a href="#">查看更多</a>
        </div>
      </div>
      <!-- 三、服务内容部分 -->
      <div class="fwnr">
        <h2>服务内容</h2>
        <p>顾问7x16小时一对一服务</p>
        <ul>
          <li v-for="item in 4" :key="item.id">
            <img src="/img/21.png" />
            <h4>杂志订阅</h4>
            <p>
              价格优惠，下单后邮寄到家，客服
              <br />
              7*16小时在线。
            </p>
            <span>了解更多</span>
          </li>
        </ul>
      </div>
      <!-- 四、服务流程部分 -->
      <div class="fwlc">
        <h2>简单快捷的服务流程</h2>
        <div class="p">简单快捷，四步搞定，省心省力</div>
        <ul>
          <li v-for="item in 4" :key="item.id">
            <img src="/img/cycicon1.png" />
            <p>确定期刊</p>
          </li>
        </ul>
        <a href="#">
          <img src="/img/weixin.png" />
          申请加急绿色通道
        </a>
      </div>
      <!-- 五、选择服务商部分 -->
      <div class="fws">
        <div class="left">
          <div class="benzhan">
            <h4>本站√</h4>
            <ul>
              <li v-for="item in 4" :key="item.id">
                <img src="/img/dui.png" />
                <b>合规运营</b>
                <div>所有运营资质合规可查，办公地址详实，售后有保障</div>
              </li>
            </ul>
          </div>
        </div>
        <img src="/img/dy-server.png" alt="" />
        <div class="right">
          <div class="qita">
            <h4>其他网站×</h4>
            <ul>
              <li v-for="item in 4" :key="item.id">
                <img src="/img/cuo.png" />
                <b>无合规资质</b>
                <div>无工商注册资质、无详实办公地址、无网站运营资质</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 六、四大保障部分 -->
      <div class="sdbz">
        <h2>四大保障</h2>
        <p>签署保密协议、一对一服务、不成功退款</p>
        <div class="content">
          <img src="/img/22.png" />
          <div class="box"></div>
          <div class="box1">
            <img src="/img/4-1.png" />
            <p>
              <b>资质保障</b>
              公司工商备案，网站工信部备案。刊物均可到国家新闻出版总署网站查询，正刊保障。
            </p>
          </div>
          <div class="box2">
            <img src="/img/4-1.png" />
            <p>
              <b>资质保障</b>
              公司工商备案，网站工信部备案。刊物均可到国家新闻出版总署网站查询，正刊保障。
            </p>
          </div>
          <div class="box3">
            <img src="/img/4-1.png" />
            <p>
              <b>资质保障</b>
              公司工商备案，网站工信部备案。刊物均可到国家新闻出版总署网站查询，正刊保障。
            </p>
          </div>
          <div class="box4">
            <img src="/img/4-1.png" />
            <p>
              <b>资质保障</b>
              公司工商备案，网站工信部备案。刊物均可到国家新闻出版总署网站查询，正刊保障。
            </p>
          </div>
        </div>
      </div>
      <!-- 七、常见问题部分 -->
      <div class="cjwt">
        <div class="content">
          <h2>常见问题</h2>
          <ul>
            <li>
              <span>Q</span>
              <h5>不成功可以退款吗？</h5>
              <span>A</span>
              <div>
                本站无论任务服务，事先跟客户都进行详细沟通确认，如果没有按期完成，由本站退还客户支付的费用。但客户单方面终止订单，是不能退款的。
              </div>
            </li>
            <div class="line"></div>
            <li>
              <span>Q</span>
              <h5>不成功可以退款吗？</h5>
              <span>A</span>
              <div>
                本站无论任务服务，事先跟客户都进行详细沟通确认，如果没有按期完成，由本站退还客户支付的费用。但客户单方面终止订单，是不能退款的。
              </div>
            </li>
            <div class="line"></div>
            <li>
              <span>Q</span>
              <h5>不成功可以退款吗？</h5>
              <span>A</span>
              <div>
                本站无论任务服务，事先跟客户都进行详细沟通确认，如果没有按期完成，由本站退还客户支付的费用。但客户单方面终止订单，是不能退款的。
              </div>
            </li>
            <div class="line"></div>
            <li>
              <span>Q</span>
              <h5>不成功可以退款吗？</h5>
              <span>A</span>
              <div>
                本站无论任务服务，事先跟客户都进行详细沟通确认，如果没有按期完成，由本站退还客户支付的费用。但客户单方面终止订单，是不能退款的。
              </div>
            </li>
          </ul>
        </div>
      </div>
      <cart-footer></cart-footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector("body").setAttribute("style", "margin:0;padding:0");
    next();
  },
};
</script>

<style lang="scss" scoped>
/******************* 一、banner部分 ************************/
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
.qkfw > .banner {
  // background-image: url("/public/img/qkfw-banner.png") no-repeat;
  position: relative;
  z-index: 2;
}

.qkfw > .banner > img {
  position: absolute;
  z-index: -1;
}

.qkfw .content {
  text-align: center;
}
.qkfw > .banner > .content > h1 {
  color: #333;
  font-size: 48px;
  padding: 172px 0 30px;
}

.qkfw > .banner > .content > h4 {
  color: #333;
  font-size: 24px;
  font-weight: 400;
}

.qkfw > .banner > .content > a {
  width: 170px;
  height: 46px;
  color: #fff;
  font-size: 16px;
  background-color: #00a2ca;
  display: block;
  text-align: center;
  line-height: 46px;
  margin: 30px auto 0;
}
/******************* 二、热门期刊服务部分 ************************/
.qkfw > .rmqk .top {
  height: 376px;
  background-color: #fff;
  text-align: center;
}
.qkfw > .rmqk > .top > h2 {
  color: #000;
  font-size: 36px;
  padding: 85px 0 15px;
  font-weight: 400;
}
.qkfw > .rmqk > .top > .p {
  color: #777;
  font-size: 18px;
  padding: 10px 0 100px;
  margin: auto;
}

.qkfw > .rmqk > .top .pic > ul {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.qkfw > .rmqk > .top > .pic > ul > img {
  width: 45px;
  height: 45px;
  padding-bottom: 14px;
}
.qkfw > .rmqk > .top > .pic > ul p {
  color: #777;
  font-size: 18px;
  padding-right: 35px;
}
.qkfw > .rmqk > .qikan {
  background-color: #f8f8f8;
  height: 957px;
  position: relative;
}

.qkfw > .rmqk > .qikan ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60px;
  width: 1225px;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.qkfw > .rmqk > .qikan > ul > li {
  width: 230px;
  height: 300px;
  padding: 35px 0 25px 0;
  margin: 0 15px 15px 0;
  background-color: #fff;
  text-align: center;
}
.qkfw > .rmqk > .qikan > ul img {
  width: 150px;
  height: 200px;
}
.qkfw > .rmqk > .qikan > ul h5 {
  margin: 16px auto 19px auto;
  font-size: 16px;
  color: #0f7cf7;
  font-weight: 400;
}
.qkfw > .rmqk > .qikan > ul p {
  font-size: 14px;
  color: #333;
  padding-right: 110px;
}
.qkfw > .rmqk > .qikan > ul b {
  font-size: 12px;
  color: #777;
  font-weight: 400;
}
.qkfw > .rmqk > .qikan > ul i {
  font-style: normal;
  color: #da3232;
}
.qkfw > .rmqk > .qikan > a {
  display: block;
  width: 195px;
  height: 54px;
  background-color: #fff;
  border: 1px #00a1cc solid;
  color: #00a1cc;
  position: absolute;
  transform: translateX(-50%);
  bottom: 55px;
  left: 50%;
  font-size: 16px;
  text-align: center;
  line-height: 54px;
}
/******************* 三、服务内容部分 ************************/
.qkfw > .fwnr {
  width: 1195px;
  margin: 78px auto;
  text-align: center;
}
.qkfw > .fwnr > h2 {
  margin-bottom: 10px;
  font-size: 36px;
  font-weight: 400;
}
.qkfw > .fwnr p {
  height: 50px;
  margin: 25px 598px 25px 0;
  line-height: 1.5;
  font-size: 18px;
  color: #999;
}
.qkfw > .fwnr > ul {
  display: flex;
  justify-content: space-between;
}
.qkfw > .fwnr > ul > li {
  width: 280px;
  height: 380px;
  box-shadow: 0 0 20px -5px;
}
.qkfw > .fwnr > ul > li > img {
  padding-top: 62px;
}
.qkfw > .fwnr > ul > li > h4 {
  margin-top: 30px;
  font-size: 24px;
  font-weight: bold;
}
.qkfw > .fwnr > ul > li p {
  height: 50px;
  margin: 25px 0 25px -130px;
  line-height: 1.5;
  font-size: 13px;
  color: #999;
}
.qkfw > .fwnr > ul > li > span {
  display: inline-block;
  width: 158px;
  height: 39px;
  line-height: 39px;
  border-radius: 3px;
  color: #fff;
  background-color: #00c1de;
}
/******************* 四、服务流程部分 ************************/
.qkfw > .fwlc {
  margin-top: 12px;
  padding: 70px 0;
  text-align: center;
  background-color: #f8f8f8;
  height: 592px;
  box-sizing: border-box;
}
.qkfw > .fwlc > h2 {
  margin-bottom: 20px;
  font-size: 36px;
  color: #333;
  font-weight: 400;
}
.qkfw > .fwlc > .p {
  margin: 0 auto 66px;
  font-size: 18px;
  color: #999;
}
.qkfw > .fwlc > ul {
  display: flex;
  justify-content: space-between;
  width: 780px;
  margin: auto;
}
.qkfw > .fwlc > ul p {
  width: 110px;
  margin: 40px 95px 0 0;
  font-size: 18px;
  color: #999;
}
.qkfw > .fwlc > a {
  display: block;
  width: 256px;
  height: 50px;
  line-height: 50px;
  margin: 65px auto;
  border-radius: 50px;
  font-size: 18px;
  color: #fff;
  background-color: #00c1de;
}
/******************* 五、选择服务商部分 ************************/
.qkfw > .fws {
  height: 568px;
}
.qkfw .fws .left {
  width: 49.99%;
  height: 100%;
  float: left;
  background-color: #24afd4;
  position: relative;
  /* box-sizing: border-box; */
}
.qkfw > .fws .left .benzhan {
  width: 416px;
  padding: 89px 180px 0 23px;
  float: right;
  position: relative;
  z-index: 5;
}
.qkfw > .fws .left .benzhan h4 {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 13px;
  margin: 0 0 32px 0;
  letter-spacing: 2px;
  font-size: 30px;
}
.qkfw > .fws .left .benzhan > ul img {
  float: left;
  margin-right: 10px;
}
.qkfw > .fws .left .benzhan > ul b {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
.qkfw > .fws .left .benzhan > ul div {
  color: #cce8f1;
  margin-bottom: 44px;
  font-size: 14px;
}
.qkfw > .fws > img {
  position: relative;
  bottom: 0;
  top: 28px;
  right: 230px;
  z-index: 4;
}
.qkfw > .fws .right {
  width: 49.99%;
  height: 100%;
  float: right;
  background-color: #f3f3f3;
  position: relative;
  top: -544px;
}
.qkfw > .fws > .right .qita {
  width: 430px;
  padding: 89px 0 0 160px;
  float: left;
  position: relative;
  z-index: 5;
}
.qkfw > .fws > .right > .qita h4 {
  padding-bottom: 15px;
  margin: 0 0 32px 0;
  letter-spacing: 2px;
  font-size: 30px;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
}
.qkfw > .fws > .right > .qita > ul img {
  float: left;
  margin-right: 10px;
}
.qkfw > .fws > .right > .qita > ul b {
  color: #333;
  font-weight: bold;
  font-size: 18px;
}
.qkfw > .fws > .right > .qita > ul div {
  color: #999;
  padding-bottom: 44px;
  font-size: 14px;
}
/******************* 六、四大保障部分 ************************/
.qkfw > .sdbz {
  height: 700px;
}
.qkfw > .sdbz h2 {
  margin: 74px 0 10px;
  font-size: 36px;
  font-weight: 400;
}
.qkfw > .sdbz p {
  margin-bottom: 66px;
  font-size: 18px;
  color: #999;
}
.qkfw > .sdbz h2,
p {
  text-align: center;
  position: relative;
  left: 25%;
}
.qkfw > .sdbz > .content img {
  vertical-align: middle;
  position: relative;
  left: 20%;
}
.qkfw > .sdbz > .content div {
  width: 340px;
  display: flex;
  justify-content: start;
}
.qkfw > .sdbz > .content div img {
  width: 71px;
  height: 71px;
}
.qkfw > .sdbz > .content p {
  width: 180px;
  margin-left: 15px;
  line-height: 1.6;
  font-size: 14px;
  color: #777;
  text-align: left;
}
.qkfw > .sdbz > .content p b {
  display: block;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.qkfw > .sdbz > .content {
  position: relative;
}
.qkfw > .sdbz > .content > img {
  position: absolute;
  left: 50%;
  transform: translateX(-65%);
}
.qkfw > .sdbz > .content > .box {
  width: 900px;
  height: 765px;
  margin: auto;
  position: relative;
}
.qkfw > .sdbz > .content > .box1 {
  position: absolute;
  top: 3%;
  left: 20.6%;
  box-sizing: border-box;
}

.qkfw > .sdbz > .content .box2 {
  position: absolute;
  top: 35%;
  left: 20.6%;
}
.qkfw > .sdbz > .content .box3 {
  position: absolute;
  top: 3%;
  right: 25%;
}
.qkfw > .sdbz > .content .box4 {
  position: absolute;
  bottom: 38.5%;
  right: 25%;
}
/******************* 七、常见问题部分 ************************/
.cjwt {
  padding: 75px 0;
  background-color: #f8f8f8;
}
.cjwt > .content {
  width: 1200px;
  margin: auto;
}
.cjwt > .content > h2 {
  margin-bottom: 10px;
  font-size: 36px;
  font-weight: 400;
  text-align: center;
}
.cjwt > .content > ul {
  margin-top: 55px;
  padding: 25px 35px 45px 35px;
  background-color: #fff;
  position: relative;
}

.cjwt > .content > ul span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  color: #fff;
  background-color: #01aaff;
  position: absolute;
  left: 50px;
}
.cjwt > .content > ul h5 {
  margin: 26px auto;
  font-size: 18px;
  color: #333;
  font-weight: 400;
  position: relative;
  right: 430px;
}
.cjwt > .content > ul div {
  padding-left: -40px;
  line-height: 1.8;
  font-size: 14px;
  color: #777;
  position: relative;
  right: 63px;
}
.cjwt > .content > ul > .line {
  width: 1100px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  margin: 20px 0;
  position: relative;
  left: 3px;
}
.bckot-block .p {
  width: 180px;
  margin-left: 15px;
  font-size: 12px;
  color: #979797;
  float: left;
  text-align: left;
}

.bckot-block .p b {
  display: block;
  margin-bottom: 7px;
  line-height: 1;
  font-size: 16px;
  color: #333;
  font-weight: 400;
}
.bckfo-c > .block-sm {
  font-size: 12px;
  line-height: 24px;
  padding: 20px 0;
  color: #666;
  text-align: center;
  border-top: 1px solid #303030;
  margin-top: 47px;
}
.bckfo-c > .block-sm a {
  color: #a0a0a0;
  font-size: 12px;
}
.bckfo-r div b {
  display: block;
  margin-bottom: 29px;
  line-height: 1.2;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
</style>